<template>
    <div class="center">
        <div class="title-box">
                <h2>最新资讯</h2>
                <p>THE LATEST INFORMATION</p>
        </div>
        <div class="centent-box"  v-loading="loading">
            <div v-for="(item,index) in newsList" :key="index">
                <router-link :to="`/newsdetail?id=${item.id}`" tag="div">
                <div class="img-box">
                    <img :src="`http://www.shangyuninfo.com/api/profile/product/${item.route}`" alt="">
                </div>
                <div class="title-before">{{item.category}}</div>
                <h3 class="title">{{item.name}}</h3>
                <p class="text">{{item.author}}</p>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
    import {getNewsList} from "../../../api";

    export default {
        name: "newscontent",
        data(){
            return{
                newsList:[],
                loading: true
            }
        },
        created() {
            getNewsList().then(res=>{
                console.log(res.rows)
                this.newsList=res.rows;
                this.newsList.reverse()
                this.loading=false;
            })
        }
    }
</script>

<style scoped lang="less">
    .title-before {
        margin: 10px 0;
        color: #666;
        font-size: 14px;
    }
    .title {

    }
    .text {
        color: #666;
        letter-spacing: 1px;
        line-height: 28px;
        font-size: 16px;
        text-align: left;
        display: -webkit-box;
        overflow: hidden;
        margin-top: 20px;
    }
.center {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    width: 1170px;
    .title-box {
        text-align: center;
        padding: 65px 0px;
        h2 {
            font-size: 30px;
            font-weight: lighter;
            color: rgb(51, 51, 51);
            font-family: BaseTitle-webfont;
        }
        p {
            color: rgb(125, 125, 125);
            letter-spacing: 1px;
            font-size: 18px;
            font-weight: 100;
            font-family: 方正兰亭超细黑;
        }
    }
    .centent-box {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        margin-left: -20px;
        margin-right: -20px;
    }
    .centent-box>div {
        display: block;
        padding-left: 20px;
        padding-right: 20px;
        min-height: 610px!important;
        margin: 30px 0;
        cursor: pointer;
        width: 50%;
        -webkit-box-flex: 0;
        flex: 0 0 50%;
        box-sizing: border-box;
        .img-box{
            overflow: hidden;
            img {
                transition: 1s;
                width: 100%;
                height: 380px;
            }
            img:hover {
                transform: scale(1.1, 1.1);
            }
        }
    }
}
</style>